<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>事件委托</title>
        <style>
            .tab {
                border: 1px solid blue ;
                border-collapse: collapse ;
                margin: auto ;
            }

            .tab td {
                width: 300px;
                height: 150px;
                border: 1px solid blue ;
                text-align: center;
                vertical-align: middle;
                overflow: hidden ;
            }

            textarea { 
                width: 100%;
                height: 100%;
                font-size: 20px ;
                border: none ;
                outline: none ;
                resize: none ;
                background-color: #dfdfdf ;
            }

        </style>
    </head>
    <body>

        <table class="tab">
            <tr>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
            </tr>
        </table>

        <script type="text/javascript">
        ( function(){

            let save = function( event ){
                console.log( event.type );
                let ta = event.target ; // 获得事件源(即文本域)
                let content = ta.value ; // 针对 input 和 textarea 适用 value 属性获取其内容
                console.log( ta , content );
                let td = ta.parentElement ; // 获得文本域的父元素
                td.removeChild( ta ); // 用父元素删除文本域
                td.innerHTML = content ; // 将文本域中的内容设置到单元格中
            }

            let edit = function( event ){
                console.log( event.type );

                event.preventDefault(); // 阻止事件默认行为
                event.stopPropagation(); // 停止事件传播
                
                let td = event.target ; // 获得事件源(即单元格)
                console.log( td );
                let oldContent = td.innerHTML ; // 获得单元格中原来的内容
                td.innerHTML = '' ; // 清空单元格

                let ta = document.createElement( 'textarea' ); // 创建文本域
                ta.value = oldContent ; // 将单元格中的内容设置到文本域中
                // 为文本域绑定失去焦点事件(blur)对应的事件监听器
                ta.addEventListener( 'blur' , save , true );
                td.appendChild( ta ); // 在单元格内部添加文本域
                ta.focus() // 让 文本域 获得焦点
            }

            let tab = document.querySelector( '.tab' );
            tab.addEventListener( 'dblclick' , edit , true );             
        } )();
        </script>
        
    </body>
</html>